<template>
  <div style="height: 100%">
    <el-aside
      width="Collapse"
      style="background-color: rgb(238, 241, 246); height: 100%"
    >
      <el-menu
        class="el-menu-vertical-demo"
        :unique-opened="true"
        mode="vertical"
        :default-active="currentMenu"
        @select="MenuListSelect"
        style="height: 100%"
        background-color="rgb(48,65,86)"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse-transition="true"
        :collapse="isCollapse"
      >
        <!-- <SidebarItem
        v-for="(item, index) in MenuList"
        :key="index"
        :item="item"
        :basePath="''"
      /> -->
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            background-color: rgb(48, 65, 86);
            color: white;
            font-size: 20px;
            width: collapse;
          "
        >
          <b style="color: white" v-show="logoTextShow">genren</b>
          <span
            :class="collapseBtnClass"
            style="cursor: pointer"
            @click="collapse"
          >
          </span>
        </div>
        <Sidebar-item
          v-for="route in MenuList"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
import MenuList from '../../router/router'
import SidebarItem from './Sidebar/siderbarItem.vue'
// import { mapGetters } from 'vuex'
export default {
  components: {
    SidebarItem
  },
  data () {
    return {
      MenuList,
      collapseBtnClass: "el-icon-s-fold",
      //菜单默认不折叠

      isCollapse: false,
      //默认宽度200
      sideWidth: 200,
      logoTextShow: true
    }
  },
  mounted () {

  },
  methods: {
    collapse () {
      //collapse为false时展开，为true时折叠。
      this.isCollapse = !this.isCollapse
      //折叠时
      if (this.isCollapse) {
        //折叠时宽度为64
        this.sideWidth = 64
        //变换图标样式
        this.collapseBtnClass = 'el-icon-s-unfold'
        //折叠时不展示名称
        this.logoTextShow = false
        //展开时
      } else {
        //展开时宽度为200
        this.sideWidth = 200
        //变换图标样式
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    MenuListSelect (key) {
      this.$router.push(key, () => { }, () => { })
    }
  },
  computed: {
    currentMenu () {
      return this.$route.path
    }
    // ...mapGetters(['sidebarRouters'])
  }
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-aside {
  transition: width 0.3s;
}
</style>